import React, { Component } from 'react';
import { Link } from 'react-router-dom';
import { Carousel, Flex, Grid, WingBlank } from 'antd-mobile';

// 导入获取当前城市工具函数
import { getCurrentCity } from '../../../utils/index.js';

// 导入图片
import Nav1 from '../../../assets/images/nav-1.png';
import Nav2 from '../../../assets/images/nav-2.png';
import Nav3 from '../../../assets/images/nav-3.png';
import Nav4 from '../../../assets/images/nav-4.png';

// 导入css文件
import './index.scss'



export default class Index extends Component {
    state = {
        swiperList: [],
        groupList: [],
        news: [],
        cityName: '',
    }
    // 图标导航栏数据、
    navList = [
        { name: '整租', src: Nav1, to: '/home/list' },
        { name: '合租', src: Nav2, to: '/home/list' },
        { name: '地图找房', src: Nav3, to: '/home/list' },
        { name: '去出租', src: Nav4, to: '/home/list' },
    ]
    // 获取轮播图数据
    async getSwiper() {
        const { body: swiperList } = await (await fetch('http://127.0.0.1:8080/home/swiper')).json()
        this.setState({ swiperList: swiperList })
    }
    // 获取租房小组数据
    async getGroupList() {
        const { body: groupList } = await (await fetch('http://localhost:8080/home/groups?area=AREA%7C88cff55c-aaa4-e2e0')).json()
        this.setState({
            groupList
        })
    }
    // 获取最新资讯数据
    async getNews() {
        const { body: news } = await (await fetch('http://localhost:8080/home/news?area=AREA%7C88cff55c-aaa4-e2e0')).json()
        this.setState({
            news
        })
    }
    componentDidMount() {
        this.getSwiper();
        this.getGroupList();
        this.getNews();
        // 获取当前城市
        getCurrentCity().then((res) => this.setState({ cityName: res.label }))
        // const res = await getCurrentCity();
        // console.log(res)
        // this.setState({ cityName: res.label })
        // const myCity = new window.BMap.LocalCity();
        // myCity.get(async result => {
        //     const { body: { label } } = await (await fetch(`http://localhost:8080/area/info?name=${result.name}`)).json()
        //     this.setState({ cityName: label })
        // })
    }
    // 渲染轮播图
    renderSwiper() {
        return this.state.swiperList.map(item => (
            <a
                key={item.id}
                href="http://www.alipay.com"
                style={{ display: 'inline-block', width: '100%', height: 212 }}
            >
                <img
                    src={`http://127.0.0.1:8080${item.imgSrc}`}
                    alt=""
                    style={{ width: '100%', verticalAlign: 'top' }}
                    onLoad={() => {
                        // fire window resize event to change height
                        window.dispatchEvent(new Event('resize'));
                        this.setState({ imgHeight: 'auto' });
                    }}
                />
            </a>
        ))
    }

    // 渲染最新资讯
    renderNews() {
        return this.state.news.map(item => (
            <div className="news-item" key={item.id}>
                <div className="imgwrap">
                    <img
                        className="img"
                        src={`http://localhost:8080${item.imgSrc}`}
                        alt=""
                    />
                </div>
                <Flex className="content" direction="column" justify="between">
                    <h3 className="title">{item.title}</h3>
                    <Flex className="info" justify="between">
                        <span>{item.from}</span>
                        <span>{item.date}</span>
                    </Flex>
                </Flex>
            </div>
        ))
    }

    render() {
        return (
            < div className='leader'>
                {/* 轮播图 */}
                <div style={{ height: 212 }}>
                    <Carousel
                        autoplay
                        infinite
                        key={this.state.swiperList.length}
                    >
                        {this.renderSwiper()}
                    </Carousel>
                    {/* 搜索框 */}
                    <Flex className="search-box">
                        {/* 左侧白色区域 */}
                        <Flex className="search">
                            {/* 位置 */}
                            <div
                                className="location"
                                onClick={() => this.props.history.push('/citylist')}
                            >
                                <span className="name">{this.state.cityName}</span>
                                <i className="iconfont icon-arrow" />
                            </div>

                            {/* 搜索表单 */}
                            <div
                                className="form"
                                onClick={() => this.props.history.push('/search')}
                            >
                                <i className="iconfont icon-seach" />
                                <span className="text">请输入小区或地址</span>
                            </div>
                        </Flex>
                        {/* 右侧地图图标 */}
                        <i
                            className="iconfont icon-map"
                            onClick={() => this.props.history.push('/map')}
                        />
                    </Flex>
                </div>
                {/* 图标导航 */}
                <Flex className='nav'>
                    {this.navList.map(i => <Flex.Item key={i.name}>
                        <Link to={i.to} >
                            <img src={i.src} alt="" />
                            <h3>{i.name}</h3>
                        </Link>
                    </Flex.Item>
                    )}
                </Flex>
                {/* 租房小组 */}
                <div className="group">
                    <h3 className="group-title">
                        租房小组 <span className="more">更多</span>
                    </h3>

                    {/* 宫格组件 */}
                    <Grid
                        data={this.state.groupList}
                        columnNum={2}
                        square={false}
                        hasLine={false}
                        renderItem={item => (
                            <Flex className="group-item" justify="around" key={item.id}>
                                <div className="desc">
                                    <p className="title">{item.title}</p>
                                    <span className="info">{item.desc}</span>
                                </div>
                                <img src={`http://localhost:8080${item.imgSrc}`} alt="" />
                            </Flex>
                        )}
                    />
                </div>
                {/* 最新资讯 */}
                <div className="news">
                    <h3 className="group-title">最新资讯</h3>
                    <WingBlank size="md">{this.renderNews()}</WingBlank>
                </div>
            </div >
        )
    }
}